<!-- 热门榜单组件 -->
<!-- 热门榜单组件 -->
<!-- 热门榜单组件 -->
<template>
  <div class="hot">

    <div class="hot-top">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon-test"></use>
      </svg>
      <span class="hot-title-left">本周热门榜单</span>
      <span class="hot-title-right">全部榜单&nbsp;></span>
    </div>

    <ul class="hot-list">
      <!-- 循环li 将热度里的旅游地点全部循环出来 -->
      <li class="hot-item" v-for="(item,key) of hotList" :key="key.id">
        <!-- 当循环到第三个li时 将iconfont图标盒子移除掉 -->
        <svg class="icon1" aria-hidden="true" v-if="key<=2">
          <!-- 调用hotList里的topImgUrl属性，将top1、top2、top3logo传进来 -->
          <use :href=item.topImgUrl></use>
        </svg>

        <img :src="item.imgUrl">
        <p class="hot-title">{{item.title}}</p>
        <p>
          <span class="hot-money-one">￥<span class="hot-money-two">{{item.money}}</span></span>起
        </p>
      </li>
    </ul>

  </div>

</template>

<script>
export default {
  name: 'HomeHot',
  props: {
    hotList: Array
  },
  data () {
    return {
    }
  },
  mounted () {
    this.chans()
  },
  methods: {
    chans () {
      // let iconList = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
      // let pages = []
      // iconList.forEach((item, index) => {
      //   console.log('当前index为:' + index)
      //   const page = Math.floor(index / 8)
      //   console.log('取整后的page等于:' + page)
      //   if (!pages[page]) {
      //     pages[page] = []
      //     console.log('开启新的一行')
      //   }
      //   pages[page].push(item)
      //   console.log(pages[page])
      // })
      // console.log(pages)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/publicStyle.styl'
  @import '~styles/mixins.styl'
  .hot
    background $bgWhite
    margin-top .2rem
    font-weight bold
    .hot-top
      padding .2rem
      position relative
      .icon
        width .33rem
        height .40rem
        vertical-align -0.15em
        fill currentColor
        overflow hidden
      .hot-title-left
        color #414141
        font-size .30rem
        position absolute
        left .6rem
        top .27rem
      .hot-title-right
        position absolute
        right .3rem
        top .27rem
        color #616161
  .hot-list
    overflow-x scroll
    overflow-y hidden
    white-space nowrap
    height 3rem
    .hot-item
      position relative
      padding-left .2rem
      padding-right .1rem
      display inline-block
      width 2rem
      height 2rem
      .hot-title
        // 调用styl文件里的ellipsis方法：多出的文字隐藏并以...表示
        ellipsis()
      .icon1
        position absolute
        left .09rem
        width .7rem
        height .7rem
        vertical-align -0.15em
        fill currentColor
        overflow hidden
      img
        width 100%
        height 100%
      p
        font-weight normal
        margin-top .1rem
        text-align center
      .hot-money-one
        color #ff8300
        font-weight normal
        font-size .26rem
      .hot-money-two
        color #ff8300
        font-weight normal
        font-size .30rem
</style>
